<template>
  <div>
    <div style="width: 90%;margin: 0 auto;"
         ref="title">
      <div style="min-height: 120px">
        <div style="text-align: center;">
          <h2 style="font-weight: bolder;width: 50%;margin: 0 auto;">{{ msgInfo.title }}</h2>
          <span style="padding: 20px;">{{ msgInfo.createTime }}</span>
        </div>
      </div>
      <div :style="imageStyle">
        <img :src="appInfo.logo"
             style="width: 100px; height: 100px" />
      </div>

    </div>
    <div class="msg-text">
      <div style="text-indent: 2em;text-align: justify;margin: 0 auto;padding-bottom:50px">
        {{ msgInfo.details }}
      </div>

      <div :style="msg.action_card.btn_orientation == '1'?'':'display: inline-grid;'">
        <a-button action
                  type="primary"
                  :style="msg.action_card.btn_orientation == '1'? class1 : class2"
                  v-for="(btn, index) in btns"
                  :key="index"
                  @click="click(btn)">{{ btn.title }}</a-button>
      </div>

    </div>
  </div>
</template>

<script>
import { getById } from '../../api/application/index'
export default {
  props: {
    msgInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      class1: 'margin: 0px 20px;',
      class2: 'margin: 10px 0px;',
      imageStyle: { float: 'right', position: 'relative', top: '-107px' },
      msg: {},
      btns: [],
      appInfo: {}
    }
  },
  created () {
    this.msg = JSON.parse(this.msgInfo.msg)
  },
  mounted () {
    this.initBtn()
    this.initLogo()
  },
  methods: {
    initLogo () {
      getById(this.msgInfo.sourceAppId).then((response) => {
        this.appInfo = response
        var xx = this.$refs
        this.imageStyle.top = (xx.title.clientHeight - 100) / 2 - xx.title.clientHeight + 'px'
      })
    },
    initBtn () {
      var btnOrientation = this.msg.action_card.btn_orientation
      var btnJsonList = this.msg.action_card.btn_json_list
      if (btnOrientation && btnJsonList.length > 0) {
        btnJsonList.forEach((item) => {
          this.btns.push(item)
        })
      } else {
        let btn = {}
        btn.action_pc_url = this.msg.action_card.single_pc_url
        btn.action_mobile_url = this.msg.action_card.single_url
        btn.title = '查看详情'

        this.btns.push(btn)
      }
    },
    click (btn) {
      window.open(btn.action_pc_url, '_blank')
    }
  }
}
</script>

<style scoped>
.a-btn {
  margin: 0px 20px;
}
.msg-text {
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 1px;
  line-height: 25px;
}
.tablebox {
  background: #fff;
  display: table;
}
#imgbox {
  display: table-cell;
  vertical-align: middle;
}
#imgbox img {
  width: 100px;
}
.tablebox {
  background: #fff;
  display: table;
}
#imgbox {
  display: table-cell;
  vertical-align: middle;
}
#imgbox img {
  width: 100px;
}
</style>
